<template>
    <div class="content">
        <StuMenuView  v-model:active-item="currentActiveItem" />
        <StuIndex v-if="currentActiveItem == 0" />
        <div class="class-box" v-if="currentActiveItem == 1">
            <div class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>学习中心</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ tabText }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="tabs">
                <div class="tab-item" :class="{ active : tabItem == 0 }" @click="tabClick(0,'课程详情')">课程详情</div>
                <div class="tab-item" :class="{ active : tabItem == 1 }" @click="tabClick(1,'课程学习')">课程学习</div>
                <div class="tab-item" :class="{ active : tabItem == 2 }" @click="tabClick(2,'知识图谱')">知识图谱</div>
                <div class="tab-item" :class="{ active : tabItem == 3 }" @click="tabClick(3,'课程作业')">课程作业</div>
                <!-- <div class="tab-item" :class="{ active : tabItem wan== 4 }" @click="tabClick(4,'课程留言板')">课程留言板</div> -->
            </div>
            <StuCenter v-if="tabItem == 0" />
            <StuStudy v-if="tabItem == 1" />
            <StuGraph v-if="tabItem == 2" />
            <HomeWork v-if="tabItem == 3" />
        </div>
    </div>
</template>
<script setup>
    import StuMenuView from '@/components/student/StuMenuView.vue'
    import StuIndex from '@/components/student/StuIndex.vue'
    import StuCenter from '@/components/student/StuCenter.vue'
    import StuStudy from '@/components/student/StuStudy.vue'
    import StuGraph from '@/components/student/StuGraph.vue'
    import HomeWork from '@/components/student/HomeWork.vue'
    import { ref } from 'vue'
    const currentActiveItem = ref(0);
    const  tabItem = ref(0)
    const  tabText = ref("课程详情")
    const tabClick = (index,text) => {
        tabItem.value = index
        tabText.value = text
    }
</script>
<style scoped>
    .class-box{width: 90%;padding-bottom: 30px;border-radius: 8px;margin: 0px auto;}
    .breadcrumb{padding: 20px 0 20px 0;}
    .tabs{display: flex;flex-direction: row;justify-content: start;gap: 5px;}
    .tabs .tab-item{background: #fff;width: 100px;text-align: center;height: 35px;line-height: 35px;border-top-left-radius: 10px;border-top-right-radius: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;cursor: pointer;}
    .tab-item.active{background: #1465E1;color: #fff;}
</style>